<template>
	<view class="main">
		<view class="hint">
			<image src="../../static/moka/makecard/success.png"></image>
			<text class="hint-text">制作完成！</text>
		</view>
		<image @click="previewImage" class="card" mode="widthFix" :src="imageSrc" :style="{width:isVertical?380:650 + 'rpx'}"></image>
		<view class="bottoms u-flex u-row-around">
			<u-button type="error" size="medium" @click="save" :custom-style="{backgroundColor: '#F56B79'}">保存相册</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageSrc: ''
			}
		},
		onLoad(option) {
			this.imageSrc = uni.getStorageSync("successImgSrc")
		},
		methods: {
			previewImage() {
				uni.previewImage({
					urls: [this.imageSrc],
					fail: (e) => {
						console.log(e)
					}
				})
			},
			save() {
				uni.getSetting({
					success: (o) => {
						o.authSetting["scope.writePhotosAlbum"] ? this.savaImageToPhoto() : uni.authorize({
							scope: "scope.writePhotosAlbum",
							success: () => {
								this.savaImageToPhoto()
							},
							fail: (e) => {
							}
						})
					}
				})
			},
			savaImageToPhoto() {
				uni.showLoading({
					title: "保存中...",
				}),
				uni.saveImageToPhotosAlbum({
					filePath: this.imageSrc,
					success: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							icon: "success",
							duration: 3000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
	    background-color: #fff;
	}
	
	.main {
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: space-between;
	    box-sizing: border-box;
	}
	
	.toptip {
	    width: 100%;
	    background: #fff8ce;
	    padding: 15rpx 0;
	}
	
	.toptip_icon {
	    padding-left: 32rpx;
	    height: 50rpx;
	}
	
	.toptip_icon image {
	    width: 30rpx;
	    height: 31rpx;
	    margin-top: 10rpx;
	}
	
	.toptip_text {
	    padding-left: 20rpx;
	    font-size: 28rpx;
	}
	
	.toptip_btn,.toptip_text {
	    height: 50rpx;
	    line-height: 50rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: 400;
	    color: #333;
	}
	
	.toptip_btn {
	    text-align: center;
	    width: 110rpx;
	    border-radius: 6rpx;
	    border: 1rpx solid #333;
	    font-size: 24rpx;
	    margin-right: 32rpx;
	}
	
	.hint {
	    display: flex;
	    flex-direction: row;
	    margin-top: 100rpx;
	}
	
	.hint image {
	    width: 51rpx;
	    height: 51rpx;
	}
	
	.hint-text {
	    margin-left: 28rpx;
	    color: #333;
	    font-size: 42rpx;
	}
	
	.card {
	    margin: 60rpx 0;
	}
	
	.save {
	    background-color: #fae60f;
	    color: #2a1500;
	}
	
	.continue,.save {
	    width: 638rpx;
	    height: 88rpx;
	    font-size: 32rpx;
	    border-radius: 100rpx;
	    text-align: center;
	    line-height: 88rpx;
	}
	
	.continue {
	    margin-top: 42rpx;
	    color: #333;
	    background: #f5f5f5;
	}
	
	.bottom_gap {
	    height: 160rpx;
	}
	
	.bottomtip image {
	    margin-top: 160rpx;
	    width: 660rpx;
	    height: 160rpx;
	}
	
	.modal-bg {
	    width: 100%;
	    height: 100%;
	    top: 0;
	    z-index: 999;
	    background: #000;
	    opacity: .7;
	}
	
	.modal-bg,.modal_box {
	    position: fixed;
	    left: 0;
	    overflow: hidden;
	}
	
	.modal_box {
	    width: 630rpx;
	    top: 502rpx;
	    z-index: 1001;
	    margin: -150rpx 60rpx 0;
	    border-radius: 3rpx;
	}
	
	.tip_set {
	    height: 375rpx;
	    background-color: #fff;
	    border-radius: 10rpx;
	}
	
	.tip_set_tittle {
	    height: 140rpx;
	    line-height: 140rpx;
	    text-align: center;
	    font-size: 36rpx;
	    font-family: PingFangSC-Medium;
	    font-weight: 500;
	    color: #333;
	}
	
	.tip_set_content {
	    height: 122rpx;
	    text-align: center;
	    font-size: 30rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: 400;
	    color: #666;
	    line-height: 42rpx;
	    padding: 10rpx 20rpx 0;
	    border-bottom: 1rpx solid #e0e0e0;
	}
	
	.openSetting {
	    margin-top: 14rpx;
	    background: #fff;
	}
	
	.tip_set button {
	    background: #fff;
	    font-size: 36rpx;
	    font-family: PingFangSC-Regular;
	    font-weight: 400;
	    color: #47c82c;
	    line-height: 85rpx;
	}
	
	.bottoms {
		width: 100vw;
	}
</style>
